<!-- 试卷关联试题列表 -->
<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="breadCrumb">
      <span>
        <router-link to="/paper">试卷列表</router-link>
      </span>
      <span>/{{ paperDetail.title }}</span>
    </div>
    <!-- 操作栏 -->
    <el-form ref="actionForm" :inline="true" label-position="right" label-width="auto" @submit.native.prevent>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="batchRemove">{{ $t('paperQuestionLangList.batchRemove') }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end" align="middle">
            <el-form-item>
              <span>此试卷共有{{ dataTotal }}题目</span>
              <!--<el-button type="primary" @click="publishPaperAction">{{ $t('paperQuestionLangList.publishPaper') }}</el-button>-->
              <el-button type="primary" @click="dialogAddExistingQuestionVisible = true">{{ $t('paperQuestionLangList.addBoughtQuestion') }}</el-button>
              <el-button type="primary" @click="openAddQuestion">{{ $t('paperQuestionLangList.loggingNewQuestion') }}</el-button>
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表栏 -->
    <div class="grid-content">
      <el-table v-loading="listLoading" ref="dataListRef" :key="tableKey" :data="paperQuestionList" :element-loading-text="$t('table.loadingText')" @selection-change="questionSelectChange" border fit stripe highlight-current-row>
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column :label="$t('table.id')" type="index" width="50" align="center"/>
        <el-table-column :label="$t('paperQuestionLangList.question')" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.category !== 'listening'" class="subjectSpan" v-html="parseNameHtml(scope.row.groupSubjectTxt, scope.row.groupSubjectAudio)"></span>
            <span v-else>
              <audio :src="scope.row.groupSubjectAudio" controls="controls" loop="loop" preload="auto"></audio>
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperQuestionLangList.tag')" align="center" width="80">
          <template slot-scope="scope">
            <el-button type="text" @click="lookTags(scope.row)">{{ $t('table.look') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperQuestionLangList.questionType')" align="center" prop="title" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.category !== ''">{{ questionTypeArr.find(v => v.value === scope.row.category).label }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperQuestionLangList.loggingPeople')" align="center" prop="nickname"/>
        <el-table-column :label="$t('table.actions')" align="center" width="260">
          <template slot-scope="scope">
            <el-button type="text" @click="updateQuestion(scope.row)">{{ $t('table.edit') }}</el-button>
            <el-button type="text" @click="removeQuestion(scope.row)">{{ $t('table.remove') }}</el-button>
            <el-button type="text" @click="goToPreview(scope.row)">{{ $t('table.preview') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="conditionForm.page" :page-sizes="[5,10,50,100,150,200]" :page-size="conditionForm.pageSize" :total="dataTotal" background layout="total, sizes, prev, pager, next, jumper" @size-change="dataSizeChange" @current-change="dataCurrentChange"/>
      </div>
    </div>
    <!-- 查看标签 -->
    <el-dialog :title="$t('paperQuestionLangList.lookTags')" :visible.sync="dialogTagsVisible" width="600px" center>
      <tagsCom :q-id="qId" @cancelAction="cancelSaveTags" />
    </el-dialog>
    <!-- 录入新题 -->
    <el-dialog :title="$t('paperQuestionLangList.newQuestion')" :visible.sync="dialogNewQuestionVisible" width="1200px" top="60px" center>
      <newQuestionCom ref="questionNew" :paper-id="id" new-type="paper" @callbackFuntion="callbackHandle"/>
    </el-dialog>
    <!-- 修改题目 -->
    <el-dialog :title="$t('paperQuestionLangList.updateQuestion')" :visible.sync="dialogUpdateQuestionVisible" width="1200px" top="60px" center>
      <updateQuestionCom ref="questionUpdate" :paper-id="id" new-type="paper" @callbackFuntion="callbackHandle"/>
    </el-dialog>
    <!-- 添加现有题目 -->
    <el-dialog :title="$t('paperQuestionLangList.addExistingQuestion')" :visible.sync="dialogAddExistingQuestionVisible" width="1200px" top="60px" center>
      <addExistingQuestionCom :paper-id="id" @successCallback="successAction" @cancelCallback="cancelAction"/>
    </el-dialog>
  </div>
</template>

<script>
import { getPaperQuestion, removePaperQuestion, publishPaper, getPaperDetail } from '@/api/paper'
import tagsCom from './components/paperTags'
import newQuestionCom from './components/paperNewQuestion'
import updateQuestionCom from './components/paperUpdateQuestion'
import { parseQuestionNameHtml } from '@/utils'
import { cates } from '@/utils/dic'
import addExistingQuestionCom from './components/addExistingQuestion'
export default {
  name: 'PaperQuestion',
  components: {
    tagsCom,
    newQuestionCom,
    updateQuestionCom,
    addExistingQuestionCom
  },
  data() {
    return {
      id: '',
      paperDetail: {},
      tableKey: 0,
      listLoading: false,
      conditionForm: {
        page: 1,
        pageSize: 10
      },
      dataTotal: 0,
      paperQuestionList: [],
      dialogTagsVisible: false,
      questionTypeArr: [],
      dialogNewQuestionVisible: false,
      dialogUpdateQuestionVisible: false,
      qId: '',
      selectQuestionArray: [],
      dialogAddExistingQuestionVisible: false
    }
  },
  created() {
    this.questionTypeArr = cates
    this.id = this.$route.query && this.$route.query.id
    this.getPageDataList()
    this.getPaperDetailData()
  },
  methods: {
    // 获取试卷详情
    getPaperDetailData() {
      const _this = this
      getPaperDetail(_this.id).then(res => {
        if (res) {
          _this.paperDetail = res
        }
      })
    },
    // 获取试卷下的试题列表
    getPageDataList() {
      const _this = this
      _this.listLoading = true
      getPaperQuestion(_this.id, _this.conditionForm).then(res => {
        _this.listLoading = false
        if (res) {
          _this.paperQuestionList = res.items
          _this.dataTotal = res.total
        }
      }).catch(err => {
        _this.listLoading = false
        console.info(err)
      })
    },
    parseNameHtml(htmlStr, audioUrl) {
      return parseQuestionNameHtml(htmlStr, audioUrl, '')
    },
    dataSizeChange(val) {
      this.conditionForm.pageSize = val
      this.getPageDataList()
    },
    // 翻页
    dataCurrentChange(val) {
      this.conditionForm.page = val
      this.getPageDataList()
    },
    // 查看标签
    lookTags(row) {
      this.qId = row.id
      this.dialogTagsVisible = true
    },
    // 取消标签保存
    cancelSaveTags() {
      this.dialogTagsVisible = false
    },
    // 打开录入新题
    openAddQuestion() {
      this.dialogNewQuestionVisible = true
      this.$nextTick(() => {
        this.$refs.questionNew.initPage()
      })
    },
    // 保存回调关闭录入新题
    callbackHandle() {
      this.dialogNewQuestionVisible = false
      this.dialogUpdateQuestionVisible = false
      this.getPageDataList()
    },
    // 打开编辑试题
    updateQuestion(row) {
      this.dialogUpdateQuestionVisible = true
      this.$nextTick(() => {
        this.$refs.questionUpdate.initPage(row)
      })
    },
    // 选择试题监听事件
    questionSelectChange(rows) {
      this.selectQuestionArray = rows
    },
    // 批量移除
    batchRemove() {
      if (this.selectQuestionArray.length === 0) {
        this.$message({
          message: '请选择要移除的试题',
          type: 'warning'
        })
      } else {
        this.$confirm('确定移除试题?', '提示', {
          confirmButtonText: this.$t('table.confirm'),
          cancelButtonText: this.$t('table.cancel'),
          type: 'warning'
        }).then(() => {
          let idArray = []
          this.selectQuestionArray.forEach(v => {
            idArray.push(v.id)
          })
          this.doBatchRemove(idArray.join(','))
        })
      }
    },
    // 移除试题
    removeQuestion(row) {
      this.$confirm('确定移除试题?', '提示', {
        confirmButtonText: this.$t('table.confirm'),
        cancelButtonText: this.$t('table.cancel'),
        type: 'warning'
      }).then(() => {
        this.doBatchRemove(row.id)
      })
    },
    // 执行移除
    doBatchRemove(ids) {
      const _this = this
      const postData = {
        questionIds: ids
      }
      removePaperQuestion(_this.id, postData).then(res => {
        if (res) {
          _this.$message({
            message: '移除成功',
            type: 'success'
          })
          _this.conditionForm.page = 1
          _this.getPageDataList()
        }
      })
    },
    // 发布
    publishPaperAction() {
      const _this = this
      this.$confirm('确定发布?', '提示', {
        confirmButtonText: this.$t('table.confirm'),
        cancelButtonText: this.$t('table.cancel'),
        type: 'warning'
      }).then(() => {
        publishPaper(_this.id).then(res => {
          if (res) {
            _this.$message({
              message: '发布成功',
              type: 'success'
            })
            _this.getPageDataList()
          }
        })
      })
    },
    // 成功添加已有试题
    successAction() {
      this.dialogAddExistingQuestionVisible = false
      this.getPageDataList()
    },
    // 取消添加已有试题
    cancelAction() {
      this.dialogAddExistingQuestionVisible = false
    },
    // 试题预览
    goToPreview(row) {
      this.$router.push({
        path: '/preview/index',
        query: {
          id: row.id,
          type: 'question',
          t: +new Date()
        }
      })
    }
  }
}
</script>

<style lang="less">
  .subjectSpan img {
    height: 130px;
  }
</style>
